<template>
  <div id="baidu" class="container">
    <div class="search">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="域名:">
          <el-select v-model="searchForm.site_id" placeholder="请选择" @change="handleChange">
            <el-option
              v-for="item in options"
              :key="item.site_id"
              :label="item.domain"
              :value="item.site_id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div id="line" class="line">
      <h6>今日流量</h6>
      <el-table
        v-if="lineData.length>0"
        :data="lineData"
        size="mini"
        :header-cell-style="{'background-color':'#fff'}"
      >
        <el-table-column prop="title" width="125px" />
        <el-table-column label="浏览量(PV)" prop="pv_count" align="right" />
        <el-table-column label="访客数(UV)" prop="visitor_count" align="right" />
        <el-table-column label="IP数" prop="ip_count" align="right" />
        <el-table-column label="跳出率" prop="bounce_ratio" align="right">
          <template slot-scope="scope">
            <span v-if="scope.row.bounce_ratio == '--'">{{ scope.row.bounce_ratio }}</span>
            <span v-else-if="scope.row.bounce_ratio != '--'">{{ scope.row.bounce_ratio }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="平均访问时长" prop="avg_visit_time" align="right" />
        <el-table-column label="转化次数" prop="trans_count" align="right" />
      </el-table>
      <el-empty v-else description="暂无数据" />
    </div>
    <el-radio-group id="radioGroup" v-model="tabPosition" class="radio-group" size="small" @change="changetime">
      <el-radio-button label="1">今天</el-radio-button>
      <el-radio-button label="2">昨天</el-radio-button>
      <el-radio-button label="3">最近7天</el-radio-button>
      <el-radio-button label="4">最近30天</el-radio-button>
    </el-radio-group>
    <div id="sem" class="content">
      <div class="left">
        <h6>趋势图</h6>
        <div class="bar" style="margin-top:1px">
          <Trend :type="type" :site-id="siteId" />
        </div>
      </div>
      <div class="right">
        <h6>Top 10关键词</h6>
        <el-table v-if="keywordsData.length>0" :data="keywordsData" size="mini" :header-cell-style="{'background-color':'#fff'}">
          <el-table-column label="关键词" prop="simple_proword_title" />
          <el-table-column label="消费" prop="cost_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)"
                stroke-linecap="square"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
    </div>
    <div id="sem" class="content">
      <div class="left">
        <h6>Top10 来源网站</h6>
        <el-table v-if="sourceSite.length>0" :data="sourceSite" size="mini" :header-cell-style="{'background-color':'#fff'}">
          <el-table-column label="来源网站" prop="simple_link_title" />
          <el-table-column label="浏览量(PV)" prop="pv_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)"
                stroke-linecap="square"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
      <div class="right">
        <h6>Top10 入口页面</h6>
        <el-table v-if="landingPage.length>0" :data="landingPage" size="mini" :header-cell-style="{'background-color':'#fff'}">
          <el-table-column label="入口页面" prop="simple_landingpage_title" />
          <el-table-column label="浏览量(PV)" prop="pv_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)"
                stroke-linecap="square"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
    </div>
    <div id="sem" class="content">
      <div class="left">
        <h6>Top10 受访页面</h6>
        <el-table v-if="visitPage.length>0" :data="visitPage" size="mini" :header-cell-style="{'background-color':'#fff'}">
          <el-table-column label="受访页面" prop="simple_visitpage_title" />
          <el-table-column label="浏览量(PV)" prop="pv_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)"
                stroke-linecap="square"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
      <div class="right">
        <h6>新老访客</h6>
        <div class="visitor">
          <ul class="first-column">
            <li>
              <img :src="require('../../images/vistor.png')" alt="">
            </li>
            <li class="second-row">浏览量</li>
            <li>访客数</li>
            <li>跳出率</li>
            <li>平均访问时长</li>
            <li>平均访问页数</li>
          </ul>
          <ul class="second-column">
            <li>
              新访客
              <div v-if="newVisitor.ratio">
                {{ newVisitor.ratio }} <span>%</span>
              </div>
              <div v-else>0</div>
            </li>
            <li class="second-row"> {{ newVisitor.pv_count }}</li>
            <li> {{ newVisitor.visitor_count }}</li>
            <li v-if="newVisitor.bounce_ratio"> {{ newVisitor.bounce_ratio }} %</li>
            <li v-else>0</li>
            <li> {{ newVisitor.avg_visit_time }}</li>
            <li> {{ newVisitor.avg_visit_pages }}</li>
          </ul>
          <ul class="last-column">
            <li>
              老访客
              <div v-if="oldVisitor.ratio">
                {{ oldVisitor.ratio }} <span>%</span>
              </div>
              <div v-else> 0 </div>
            </li>
            <li class="second-row"> {{ oldVisitor.pv_count }}</li>
            <li> {{ oldVisitor.visitor_count }}</li>
            <li v-if="oldVisitor.bounce_ratio"> {{ oldVisitor.bounce_ratio }} %</li>
            <li v-else>0</li>
            <li> {{ oldVisitor.avg_visit_time }}</li>
            <li> {{ oldVisitor.avg_visit_pages }}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <h6>访客属性-年龄分布</h6>
        <div ref="echart" class="bar">
          <Bar v-if="show" :site-id="siteId" />
        </div>
      </div>
      <div class="right">
        <h6>地域分布</h6>
        <div class="bar">
          <Map v-if="show" :site-id="siteId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import semApi from '@/api/baidu'
import Bar from './components/barChart'
import Map from './components/mapChart.vue'
import Trend from './components/trendChart.vue'
import websiteApi from '@/api/website'
export default {
  components: { Bar, Map, Trend },
  data() {
    return {
      searchForm: {
        domain: '',
        site_id: ''
      },
      siteId: '',
      tabPosition: '1',
      show: false,
      lineData: [], // 今日流量
      keywordsData: [], // Top10关键词
      visitPage: [], // 受访页面
      landingPage: [], // 入口页面
      sourceSite: [], // 来源网站页面
      newVisitor: [], // 新用户
      oldVisitor: [], // 老用户
      type: 1, // 时间段的类型
      options: []
    }
  },
  // computed: {
  //   siteId1() {
  //     return this.$store.getters.siteId
  //   }
  // },
  // watch: {
  //   siteId1(val, value) {
  //     this.siteId = val
  //     this.getLine()
  //     this.getQxt()
  //     this.getCommon()
  //   }
  // },
  created() {
    this.getWeblist()
    // this.siteId = this.$store.getters.siteId
    // this.getLine()
    // this.getQxt()
    // this.getCommon()
  },
  mounted() {
    window.addEventListener('scroll', this.showEchart, true)
  },
  destroyed() {
    window.removeEventListener('scroll', this.showEchart, true)
  },
  methods: {
    // // 获取站点列表
    getWeblist() {
      semApi.webList().then(res => {
        this.options = res.data
        this.searchForm.site_id = res.data[0].site_id
        this.siteId = res.data[0].site_id
        // this.handleChange()
        this.$nextTick(() => {
          this.getLine()
          this.getQxt()
          this.getCommon()
        })
      })
    },
    // // 切换站点
    handleChange(val) {
      // this.getColumnlist(this.searchForm.website_id)
      this.searchForm.site_id = val
      this.siteId = val
      this.$nextTick(() => {
        this.getLine()
        this.getQxt()
        this.getCommon()
      })
    },
    // 切换时间段
    changetime(val) {
      this.type = val
      this.getQxt()
    },
    // 趋势图
    getQxt() {
      const val = {
        type: this.type,
        site_id: this.siteId,
        metrics: 'pv_count'
      }
      semApi.qxtList(val).then(res => {

      })
    },
    showEchart() {
      // const that = this
      // 垂直滚动的值兼容问题
      const scrollTopE = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 屏幕的高度
      const screenHeight = window.screen.availHeight
      // 判断是否滚动到目标区域范围内
      if ((this.$refs.echart.offsetTop - screenHeight) > scrollTopE && scrollTopE < (this.$refs.echart.offsetTop + this.$refs.echart.offsetHeight)) {
        this.show = false
      } else {
        this.show = true
      }
    },
    // 今日流量
    getLine() {
      semApi.lineList({ site_id: this.siteId }).then(res => {
        if (res.code == 0) {
          const data1 = res.data.fields
          const data2 = res.data.items
          const data3 = []
          const obj = {}
          for (var x = 0;x < data2.length;x++) {
            if (x == 2) {
              data3.push({
                title: data2[x][0],
                pv_count: data2[x][1].val,
                visitor_count: data2[x][2].val,
                ip_count: data2[x][3].val,
                bounce_ratio: data2[x][4].val,
                avg_visit_time: data2[x][5].val,
                trans_count: data2[x][6].val
              })
            } else {
              data3.push({
                title: data2[x][0],
                pv_count: data2[x][1],
                visitor_count: data2[x][2],
                ip_count: data2[x][3],
                bounce_ratio: data2[x][4],
                avg_visit_time: data2[x][5],
                trans_count: data2[x][6]
              })
            }
          }
          this.lineData = data3.splice(0, 3)
        } else {
          this.$message.error('统计分析配置异常，请检查')
        }
      })
    },
    // 网站概况
    getCommon() {
      this.keywordsData = []
      this.landingPage = []
      this.visitPage = []
      this.sourceSite = []
      semApi.commonList({ site_id: this.siteId }).then(res => {
        res.data.word.items.forEach(el => {
          this.keywordsData.push({
            simple_proword_title: el[0],
            cost_count: el[1],
            ratio: el[2]
          })
        })
        // 受访页面
        res.data.visitPage.items.forEach(el => {
          this.visitPage.push({
            simple_visitpage_title: el[0],
            pv_count: el[1],
            ratio: el[2]
          })
        })
        // 入口页面
        res.data.landingPage.items.forEach(el => {
          this.landingPage.push({
            simple_landingpage_title: el[0],
            pv_count: el[1],
            ratio: el[2]
          })
        })
        // 来源网站页面
        res.data.sourceSite.items.forEach(el => {
          this.sourceSite.push({
            simple_link_title: el[0],
            pv_count: el[1],
            ratio: el[2]
          })
        })
        this.newVisitor = res.data.visitType.newVisitor
        this.oldVisitor = res.data.visitType.oldVisitor
      })
    }

  }
}
</script>

<style lang='scss'>
#baidu{
  .container{
    margin-bottom: 40px;
  }
  .el-table .cell{
    white-space: nowrap;
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
    background-color: #f84311;
    box-shadow:none;
    color:#fff;
  }

  .el-radio-button__inner:hover{
    color: #f84311;
  }
  .el-menu--horizontal>.el-menu-item.is-active{
    background-color: #f84311 !important;
    color: #fff !important;
  }
  .elmenu .el-submenu.is-active .el-submenu__title{
    background-color: #f84311 !important;
    color: #fff !important;
    .el-submenu__icon-arrow.el-icon-arrow-down{
      color: #fff !important;
    }
  }
}
#line{
  .el-table td, .el-table th.is-leaf{
    border: none;
  }
  .el-table{
    border-bottom: solid 1px #eee;
    padding-bottom: 20px;
    color: #323437;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #fff;
  }

  .el-table__body .el-table__row td{
    border-right: solid 1px #eee;
  }
  .el-table::before{
    height: 0;
  }
  .el-table__body .el-table__row td:last-child, .el-table__header  .el-table_1_column_7.is-right {
    border-right: none;
    padding-right: 30px;
  }
  .el-table__body .el-table__row td:first-child{
    padding-left: 12px;
  }
 .el-table th.is-right, .el-table td.is-right{
    padding-right: 10px;
  }
  // 第一行加粗
  .el-table__body .el-table__row:first-child .is-right{
    font-weight: bold;
    font-size: 16px;
    color: #111314;
  }

}
#radioGroup{
  .el-radio-button__inner{
border: none;
border-right: solid 1px #eee;
  }
  .el-radio-button:last-child .el-radio-button__inner{
    border-radius:0;
  }
  .el-radio-button:first-child .el-radio-button__inner{
    border-radius: 0;
  }
}
#sem{
  .el-table{
    color: #323437;
  }
  .el-table td, .el-table th.is-leaf{
    border: none;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #fff;
  }
  .el-table--enable-row-hover .el-table__body tr>td{
    height: 31px;
  }
  .el-table--mini td{
    padding: 0;
  }
  .el-table::before{
    height: 0;
  }
 .el-table__header thead th{
    color: #787a7d;
  }
  .el-progress-bar__inner,.el-progress-bar__outer{
    border-radius: 0;
    background-color: #fff;
  }
  .el-progress-bar__innerText{
    color: #323437;
  }
}
</style>
<style scoped lang='scss'>
.container{
  margin-bottom: 40px;
}
.line{
  background-color: #fff;
  padding: 20px 0 30px;
  border: solid 1px #eee;
  h6{
    margin-left: 20px;
  }
}
h6{
  font-size: 14px;
  }
.search{
    min-width: 1350px;
    background-color: #fff;
    padding: 20px 30px 0px;
    border-radius: 5px;
  }
.radio-group{
  margin: 20px 0 0 0;
  width:100%;
  border:solid 1px #eee;
  background-color:#fff;

}
.content{

  margin-top: 20px;
  margin-bottom: 20px;
  height: 413px;
  h6{
    margin-bottom: 20px;
  }

  .left, .right{
    width: calc(50% - 20px);
    float: left;
    background-color: #fff;
    padding: 20px;
    border:  solid 1px #eee;
    border-radius: 5px;
    height: 415px;
    @media (max-width:1200px){
      width: 100%;
      margin-bottom: 20px;
  }
  }
  .right{
     @media (max-width:1200px){
      width: 100%;
      margin-bottom: 60px;
  }
  }
  .left{
    margin-right: 40px;
  }

  .right{
    .visitor{
      display: flex;
      justify-content: space-between;
      flex-basis: auto;
      margin-top: 50px;
      ul{
        list-style-type: none;
        flex-grow: 1;

        li{
          border-bottom: solid 1px #eee;
          border-right:solid 1px #eee;
          padding-left:20px;
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          color: #414448;
        }
      }

      ul.first-column li{
        border-left: solid 1px #eee;
        text-align: center;
        padding-left: 0;
        color: #787a7d;
      }
      ul.second-column li:first-child{
        border-left: solid 1px #eee;
        border-right: solid 1px #eee;
        line-height: 30px;
        div{
          color: #f83600;
          font-family: PingFang-SC-Bold;
          font-size: 30px;
          span{
            font-size: 18px;
          }
        }
      }
      ul.last-column li:first-child{
        line-height: 30px;
        div{
          font-family: PingFang-SC-Bold;
          color: #fe872b;
          font-size: 30px;
          span{
            font-size: 18px;
          }
        }
      }
      ul.first-column li:first-child{
        border-left: none;
      }
      li.second-row{
        border-top: solid 1px #eee;
      }
      // ul.last-column li:first-child{
      //   border-right: none;
      // }
      ul li:first-child{
        height: 71px;
        border: none;
        margin-bottom: 33px;
        font-size: 16px;
        color: #5d5d61;
      }
    }
  }
}
.bar{
  width: 100%;
  margin-top: -20px;
}
</style>

